﻿@using RuoVea.ExDto
@using RuoVea.OmiLog.Language
@using RuoVea.OmiLog.Attributes
@using RuoVea.OmiLog.Options
@{
    AppConfig config = ConfigManages.Config ?? new AppConfig();
}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Html.Raw(i18n.operation_log)</title>
    <link href="~/ruoveaui/xg6rvft8p/avue/index.css" rel="stylesheet" />
    <link href="~/ruoveaui/xg6rvft8p/elementui/index.min.css" rel="stylesheet" />
    <style>.el-button [class*="el-icon-"] + span {margin-left: 1px !important;}</style>
    <script src="~/ruoveaui/xg6rvft8p/avue/filesaver.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/xlsx.full.min.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <avue-crud :data="tableData" :option="option" :page.sync="pageOption" :table-loading="loading"
                   v-on:refresh-change="refreshChange"
                   v-on:search-change="searchChange"
                   v-on:search-reset="resetChange" 
                   :cell-style="cellStyle"
                   v-on:on-load="onLoad">
            <template slot="avatar" slot-scope="scope">
                <el-avatar shape="circle" :src="scope.row.avatar">{{scope.row.account}} </el-avatar>
            </template>

            <template slot="record" slot-scope="scope">
                <modify-record :data="scope.row"></modify-record>
            </template>
            <template slot="menuRight" slot-scope="{size}">
                <el-button icon="el-icon-delete" type="danger" circle :size="size" v-on:click="handleDeleteAll" v-if="option.clearBtn"></el-button>
            </template>
        </avue-crud>
    </div>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.i18n.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.lang.js"></script>
    <script>
        Vue.prototype.i18n.messages.zhCN = { ...Vue.prototype.i18n.messages.zhCN, ...{ "request_method": "请求方式", "name": "名称", "execution_success": "执行成功", "browser": "浏览器", "address": "地址", "class_name": "类名", "request_parameters": "请求参数", "response_result": "返回结果", "duration_ms": "耗时(毫秒)", "operation_time": "操作时间", "operator": "操作人","failure": "失败","success": "成功",} };
        Vue.prototype.i18n.messages.en = { ...Vue.prototype.i18n.messages.en, ...{"request_method": "Request Method", "name": "Name", "execution_success": "Execution Success", "browser": "Browser", "address": "Address", "class_name": "Class Name", "request_parameters": "Request Parameters", "response_result": "Response Result", "duration_ms": "Duration (Milliseconds)", "operation_time": "Operation Time", "operator": "Operator","failure": "Failure","success": "Success", } };
        Vue.prototype.i18n.messages.fr = { ...Vue.prototype.i18n.messages.fr, ...{"request_method": "Méthode de requête", "name": "Nom", "execution_success": "Exécution réussie", "browser": "Navigateur", "address": "Adresse", "class_name": "Nom de classe", "request_parameters": "Paramètres de la requête", "response_result": "Résultat de la réponse", "duration_ms": "Durée (millisecondes)", "operation_time": "Heure d'opération", "operator": "Opérateur", "failure": "Échec","success": "Succès",} };
        Vue.prototype.i18n.messages.ja = { ...Vue.prototype.i18n.messages.ja, ...{ "request_method": "リクエスト方法", "name": "名称", "execution_success": "実行成功", "browser": "ブラウザ", "address": "アドレス", "class_name": "クラス名", "request_parameters": "リクエストパラメータ", "response_result": "レスポンス結果", "duration_ms": "所要時間（ミリ秒）", "operation_time": "操作時間", "operator": "操作者","failure": "失敗","success": "成功",} };
        Vue.prototype.i18n.messages.vi = { ...Vue.prototype.i18n.messages.vi, ...{ "request_method": "Phương thức yêu cầu", "name": "Tên", "execution_success": "Thực hiện thành công", "browser": "Trình duyệt", "address": "Địa chỉ", "class_name": "Tên lớp", "request_parameters": "Tham số yêu cầu", "response_result": "Kết quả trả về", "duration_ms": "Thời gian thực hiện (mili giây)", "operation_time": "Thời gian hoạt động", "operator": "Người thực hiện","failure": "Thất bại","success": "Thành công", } };
        Vue.prototype.i18n.messages.zhTW = { ...Vue.prototype.i18n.messages.zhTW, ...{ "request_method": "请求方式", "name": "名称", "execution_success": "执行成功", "browser": "浏览器", "address": "地址", "class_name": "类名", "request_parameters": "请求参数", "response_result": "返回结果", "duration_ms": "耗时(毫秒)", "operation_time": "操作时间", "operator": "操作人","failure": "失败","success": "成功",} };
    </script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhCN.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/en.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/fr.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/ja.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/vi.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "@config?.PrefixRoute";</script>
    <script src="~/ruoveaui/xg6rvft8p/vue/axios.min.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue-i18n.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.option.js"></script>
    <script>
        var successDicData = [{ label: `${Vue.prototype.i18n.t('failure')}`, value: 0, }, { label: `${Vue.prototype.i18n.t('success')}`, value: 1, }];
        new Vue({
            el: '#app',
            data() {
                return {
                    name: "logop",
                    pageUrl: "/logop/pages",

                    pageOption: {
                        total: 0,
                        page: 1,
                        pageSize: 10
                    },

                    loading: true,
                    btnLoading: false,
                    tableData: [],
                    searchParams: {},

                    searchShowBtn: false,
                    refreshBtn: false,
                    option: {
                        searchShowBtn: Permissions.avePermission(`sysLogOp:pages`),
                        refreshBtn: Permissions.avePermission(`sysLogOp:pages`),
                        clearBtn: Permissions.avePermission(`sysLogOp:clear`),
                        rowKey: 'id',
                        columnBtn: false,
                        searchShow: false,
                        addBtn: false,
                        menu: false,
                        editBtn: false,
                        delBtn: false,
                        viewBtn: false,
                        excelBtn:Permissions.avePermission(`sysLogOp:export`),
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },

                            { prop: "reqMethod", label: `${this.i18n.t('request_method')}`, search: true, hide: false, type: "select", width: 80, allowCreate:true,filterable:true,dicData:[{ label: `POST`, value:'POST', },  { label: `GET`, value:'GET', },  { label: `DELETE`, value:'DELETE', },  { label: `PUT`, value:'PUT', },  ]  },
                            { prop: "name", label: `${this.i18n.t('name')}`, search: true, hide: false, type: "input", width: 140, },
                            { prop: "success", label: `${this.i18n.t('execution_success')}`, search: true, hide: false, type: "select", overHidden: true, width: 80,dicData:successDicData},
                            { prop: "ip", label: `IP`, search: false, hide: false, type: "input", overHidden: true, width: 120,},
                            { prop: "browser", label: `${this.i18n.t('browser')}`, search: false, hide: false, type: "input", overHidden: true, },
                            { prop: "location", label: `${this.i18n.t('address')}`, search: false, hide: false, type: "input", overHidden: true, },
                            { prop: "className", label: `${this.i18n.t('class_name')}`, search: false, hide: false, type: "input", overHidden: true, },
                            { prop: "param", label: `${this.i18n.t('request_parameters')}`, search: false, hide: false, type: "input", overHidden: true, },
                            { prop: "result", label: `${this.i18n.t('response_result')}`, search: false, hide: false, type: "input", overHidden: true, },
                            { prop: "elapsedTime", label: `${this.i18n.t('duration_ms')}`, search: false, hide: false, type: "input", overHidden: true,width: 100, },
                            { prop: "opTime", label: `${this.i18n.t('operation_time')}`, search: true, hide: false, type: "datetime",searchRange: true,  overHidden: true,width: 180, },
                            { prop: "account", label: `${this.i18n.t('operator')}`, search: false, hide: false, type: "input", overHidden: true,width: 120,},
                        ]
                    }
                }
            },
            created() {
            },
            methods: {
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex == 3) {
                        if (row.success == 1) {
                            return { color: '#409eff', }
                        }
                        else {
                            return { color: '#f56c6c', }
                        }
                    }
                },
                hasPermission(key) {
                    if (key === 'columnBtn' || key === 'menu' || key === 'refreshBtn') return true;
                    else return Permissions.avePermission(`${this.name}:${key}`);
                },
                getPermission(key) {
                    return Permissions.avePermission(`${key}`);
                },
                onLoad(page, done) {
                    if (this.searchParams.opTime) {
                        const [BeginTime, EndTime] = this.searchParams.opTime
                        var data = { ...page, ...this.searchParams };
                        data.BeginTime = BeginTime;
                        data.EndTime = EndTime;
                    }
                    else {
                        var data = { ...page, ...this.searchParams };
                    }
                    this.$http.post(`${this.pageUrl}`, data).then((res) => {
                        this.tableData = res.rows;
                        this.pageOption.total = res.totalRows;
                        this.loading = false;
                        if (done) { done(); }
                    }).catch(e => {
                        this.loading = false;
                        console.log(e);
                    });
                },
                searchChange(params, done) {
                    this.searchParams = params;
                    this.pageOption.page = 1;
                    this.onLoad(this.pageOption, done);
                },
                resetChange(item) {
                    this.searchParams = item;
                    this.pageOption.page = 1;
                    this.onLoad(this.pageOption);
                },
                refreshChange() { this.onLoad(this.pageOption); },

                handleDeleteAll() {
                    this.$confirm(this.i18n.t('confirmdelete'), this.i18n.t('tips'), { confirmButtonText: this.i18n.t('determine'), cancelButtonText: this.i18n.t('cancel'), type: 'error', customClass: "elmessagebox" }).then(() => {
                        this.$http.post("/logdiff/clear").then((res) => {
                            if (!res) {
                                this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                                this.onLoad();
                            }
                        });
                    }).catch(_ => { console.info(_); })
                },
            }
        });
    </script>
</body>
</html>
